<template>
  <div class="table-wrapper" ref="tableWrapRefs">
    <div class="thead">
      <img class="thead-icon" src="@/assets/home/theadIcon.png" alt="">
      <div class="tr">
        <div
          class="td"
          :style="{ width: `${indexW}`, minWidth: `${indexW}`, maxWidth: `${indexW}` }"
          v-if="index">
          <slot name="headIndex">
            <div class="span">序号</div>
          </slot>
        </div>
        <div
          class="td"
          :style="{ width: `${indexW}`, minWidth: `${indexW}`, maxWidth: `${indexW}` }"
          v-if="selectable">
          <slot name="headIndex">
            <div class="span">选择</div>
          </slot>
        </div>
        <div
          class="td"
          v-for="(e, i) in headData"
          :key="i"
          :class="{ 'textCenter': e.type === 'number' }"
          :style="{ width: e.width, minWidth: e.width, maxWidth: e.width, }">
          <slot :name="e.hSlot" :row="e">
            <div class="span" :class="{ 'spanXC': e.type === 'number' }">{{ e.label }}</div>
          </slot>
        </div>
      </div>
    </div>
    <div class="tbody" ref="tbodyWrap" @mouseover="rowOver" @mouseout="rowOut" @scroll="scrollTopMove">
      <template v-for="(e, i) in tableData">
        <div
          class="row-tr"
          :class="{ 'cursor': cursor, 'tr-flash': e.trFlash,'first-td': e.firstTd,'second-td': e.secondTd ,'third-td': e.thirdTd  }"
          :key="i"
          @dblclick="rowDblclick(e, i)"
        >
          <div class="tr" :class="{ 'active': active === i ? true:false, 'isHover': e.isHover  }">
            <div class="td DIN-BlackItalic"
                 :style="{ width: `${indexW}`, minWidth: `${indexW}`, maxWidth: `${indexW}`,  }"
                 v-if="index">{{ e.tableIndex }}
            </div>
            <!-- ------模拟checkbox复选框 ------- -->
            <div class="td"
                :style="{ width: `${indexW}`, minWidth: `${indexW}`, maxWidth: `${indexW}`,  }"
                v-if="selectable">
              <img style="cursor: pointer;" @click="rowClick(e, i)" :src="active === i ? listimg[1]: listimg[0]" alt="">
            </div>
            <div
              class="td"
              v-for="(es, is) in headData"
              :key="is"
              :style="{ width: es.width, minWidth: es.width, maxWidth: es.width }">
              <slot :name="es.slot" :row="e">
                <div class="span" :class="{ 'spanXC': es.type === 'number' }">
                  <div class="nameIcon" v-if="es.type === 'name'" @click.stop="toggleName(e)">
                    <img v-if="e.showName" src="@/assets/home/openEye.png" alt="">
                    <img v-else src="@/assets/home/closeEye.png" alt="">
                  </div>
                  <el-tooltip placement="top-start" v-if="es.isTooltip">
                    <div slot="content" class="el-tooltip-content" v-html="setText(e, es)"></div>
                    <span
                      class="td-el-txt"
                      :class="{
                    'DIN-BlackItalic': es.type === 'number'|| es.type === 'time',
                  }"
                      v-html="setText(e, es)">
                  </span>
                  </el-tooltip>
                  <span
                    class="td-el-txt"
                    :style="{...es.style}"
                    v-else
                    :class="{'DIN-BlackItalic': es.type === 'number'|| es.type === 'time'}"
                    v-html="setText(e, es)">
                </span>
                </div>
              </slot>
            </div>
          </div>
          <div class="tr-detail" v-if="trDetail && active === i">
            <slot name="tr-detail" :row="e"></slot>
          </div>
        </div>
      </template>
      <emptyVue v-if="!tableData.length" />
    </div>
    <paginationVue
      v-if="pageSize && pageNum && (total > pageSize)"
      :pageSize="pageSize"
      :pageNum="pageNum"
      :total="total"
      @currentChange="currentChange"
      small
      :pager-count="5"
    />
  </div>
</template>

<script>
import { commafy } from "@/utils/index.js";
import paginationVue from "./pagination";

export default {
  components: { paginationVue },
  props: {
    pageSize: Number,
    pageNum: Number,
    total: Number,
    // 表头字段
    headData: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => {
        return []
      },
    },
    strip: {
      type: [Number],
      default: 5
    },
    // 强制变手
    cursor: {
      type: [Boolean, String],
      default: false
    },
    // 是否需要动画
    isTransition: {
      type: Boolean,
      default: false
    },
    // 是否滚动到底部回调
    isScrollTopMove: {
      type: Boolean,
      default: false
    },
    keyProp: {
      type: String,
      default: 'ranking'
    },
    activeProp: {
      type: Number,
      default: -1
    },
    // 是否显示复选框
    selectable: {
      type: Boolean,
      default: false
    },
    index: {
      type: Boolean,
      default: false
    },
    trDetail: {
      type: Boolean,
      default: false
    },
    isMoveTop: {
      type: Boolean,
      default: false
    },
    indexWi: {
      type: [Number, String],
      default: '40px'
    },
  },
  computed: {
  //   _isMoveTop() {
  //     return this.isMoveTop && (this.tableData.length > this.strip)
  //   },
  //   _tableData() {
  //     let arr = []
  //     this.tableData.forEach((e, i) => {
  //       e.tableIndex = i + 1
  //     })
  //     if (this.isMoveTop && (this.tableData.length > this.strip)) {
  //       arr = this.tableData.concat(this.tableData.slice(0, this.strip))
  //     } else {
  //       arr = this.tableData
  //     }
  //     return arr
  //   },
    indexW() {
      return this.indexWi
    }
  },
  // watch: {
  //   tableData() {
  //     if (this._isMoveTop) {
  //       clearInterval(this.timer)
  //       this.$refs.tbodyWrap.scrollTop = 0;
  //       this.timer = setInterval(this.moveTop, this.sep - 1)
  //     }
  //   },
  //   activeProp: {
  //     immediate: true,
  //     handler(val) {
  //       this.active = val
  //     }
  //   },
  //   isMoveTop(val){
  //     if (val){
  //       this.rowOut()
  //     }
  //   }
  // },
  data() {
    return {
      isShow: false,
      active: -1, // 选中下标
      timer: null,
      timer1: null,
      sep: 100,
      clickTimer: null,
      listimg: [
        require('@/assets/home/sel.png'),
        require('@/assets/home/sel1.png'),
      ],
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.isShow = true
    //   if (this._isMoveTop) {
    //     this.timer = setInterval(this.moveTop, this.sep)
    //   }
    // })
  },
  beforeDestroy() {
    // clearInterval(this.timer1)
    // clearInterval(this.timer)
  },
  methods: {
    currentChange(val) {
      this.$emit('currentChange', val)
    },
    moveTop() {
      let t = this.$refs.tbodyWrap
      if (t.scrollHeight <= t.clientHeight + t.scrollTop) {
        t.scrollTop = 0
      } else {
        t.scrollTop++
      }
    },
    scrollTopMove() {
      if (this.isScrollTopMove) {
        let t = this.$refs.tbodyWrap
        if (t.scrollHeight <= t.clientHeight + t.scrollTop) {
          this.$emit('scrollTopMove', this._tableData)
        }
      }
    },
    rowClick(e, i) {
      clearTimeout(this.clickTimer)
      this.clickTimer = setTimeout(() => {
        // if (this.cursor) {
          if(this.active === i) {
            this.active = -1;
          } else {
            this.active = i;
            e.index = i
          }
          this.$emit('rowClick', e, this.active)
        // }
      }, 200)

    },
    rowDblclick(e, i) {
      clearTimeout(this.clickTimer)
      e.index = i
      this.$emit('rowDblclick', e)
    },
    setText(e, es) {
      let str;
      if (es.type == 'name') {
        str = e.showName ? (e[es.prop || es.key] || '-') : '***';
      } else {
        if (e[es.prop || es.key] === undefined || e[es.prop || es.key] === null) return '-'
        str = es.type === 'number' ? (commafy(e[es.prop || es.key]) + '' || '-') : (e[es.prop || es.key] + '' || '-')
      }
      return str
    },
    // 切换名字
    toggleName(e) {
      e.showName = !e.showName;
      this.$forceUpdate();
    },
    rowOver() {
      if (this._isMoveTop) {
        clearInterval(this.timer)
      }
    },
    rowOut() {
      if (this._isMoveTop) {
        clearInterval(this.timer)
        this.timer = setInterval(this.moveTop, this.sep)
      }
    }
  }
}
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
  width: 5px;
  height: 20px;
}

::-webkit-scrollbar-thumb {
  background-color: #7393fe;
  border-radius: 10px;
}
.el-tooltip-content {
  max-width: 15vw;
}

.table-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  //border: 1px solid rgba(116, 203, 255, .2);
  .thead {
    display: flex;
    background-color: #85b9ff;
    border: 1px solid #57b2ff;
    //border: 1px solid rgba(106, 211, 255, 0.6);
    margin-bottom: 6px;
    //padding: 0 8px;
    height: 36px;
    .thead-icon {
      width: 7px;
      height: 6px;
    }
    .tr {
      width: calc(100% - 7px);
      height: 100% !important;
      margin-bottom: 0;

      .td {
        font-weight: bold;
        color: #fff;
        text-align: center;
        //font-style: italic;
      }
    }
  }

  .tbody {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    //padding: 0 8px;

    .tr {
      // border: 1px solid #57b2ff;
      // background: rgba(14, 42, 80, 0.6);
      &.active {
        // background-color: rgba(73, 215, 149, 0.52);
        // border: 1px solid rgba(73, 215, 149, 0.2);
      }

      &.isHover {
        // background-color: rgba(73, 215, 149, 0.52);
        // border: 1px solid rgba(73, 215, 149, 0.2);

        &:hover {
          &:after {
            content: "";
            display: block;
            position: absolute;
            left: 110%;
            width: 3%;
            height: 100%;
            top: 0;
            background: #FFFFFF;
            opacity: 0.8;
            transform: rotate(45deg);
            animation: left-to-right .5s linear;
          }

          @keyframes left-to-right {
            0% {
              left: 10%;
              opacity: 1
            }
            50% {
              opacity: 0.5
            }
            100% {
              opacity: 0
            }
          }
        }
      }

      &:hover {
        background: linear-gradient(90deg, rgba(72, 181, 177, 0), #48b5b1);

        &:before {
          border-color: transparent #FFF transparent transparent;
        }
      }
    }
  }

  .row-tr {
    height: 36px;
    // margin-bottom: 10px;

    &:nth-child(2n) {
      //background-color: rgba(166, 203, 255, 0.08);
      background-color: rgba(166, 203, 255, 0.1);
      //background-color: #74cbff;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }

  .tr-detail {
    padding: 0.5vw;
  }

  .tr-flash {
    .tr {
      background: rgba(95, 250, 178, 0.52);
    }
  }

  .tr-flash .tr:before {
    content: "";
    display: block;
    position: absolute;
    left: 117%;
    width: 3%;
    height: 80%;
    top: 0;
    background: #FFFFFF;
    opacity: 0.3;
    transform: rotate(45deg) skewX(-45deg);
    animation: left-to-right1 1.6s linear infinite;
  }

  .tr-flash .tr:after {
    content: "";
    display: block;
    position: absolute;
    left: 120%;
    width: 2.2%;
    height: 100%;
    top: 0;
    background: #FFFFFF;
    opacity: 0.3;
    transform: rotate(45deg) skewX(-45deg);
    animation: left-to-right 1.6s linear infinite;
  }

  @keyframes left-to-right {
    0% {
      left: 7%;
      opacity: 0.3
    }
    50% {
      left: 57%;
      opacity: 0.3
    }
    100% {
      left: 117%;
      opacity: 0
    }
  }
  @keyframes left-to-right1 {
    0% {
      left: 10%;
      opacity: 0.3
    }
    50% {
      left: 60%;
      opacity: 0.3
    }
    100% {
      left: 120%;
      opacity: 0
    }
  }

  .tr {
    height: 100%;
    display: flex;
    align-items: center;
    //background-color: rgba(116, 203, 218, 0.08);
    //border: 1px solid rgba(116, 203, 218, 0.2);
    position: relative;

    //&:before {
    //  content: "";
    //  width: 0;
    //  height: 0;
    //  position: absolute;
    //  left: -0.15vh;
    //  top: -0.15vh;
    //  border-width: 0.3vh;
    //  border-style: solid;
    //  border-color: transparent #74cbff transparent transparent;
    //  transform: rotate(45deg);
    //}
    .td {
      height: 100%;
      line-height: 100%;
      flex: 1;
      // color: white;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      //padding-left: 10px;
      font-size: 12px;
    }
  }

  .first-td:nth-child(1) {
    background: linear-gradient(to right, #d9b232, #0f3886 20%);
  }

  .second-td:nth-child(2) {
    background: linear-gradient(to right, #c8cacd, #113884 20%);
  }

  .third-td:nth-child(3) {
    background: linear-gradient(to right, #dab9a1, #113884 20%);
  }

}

.flip-list-move {
  transition: transform 1s;
}

.Eye {
  height: 2vh;
}

.span {
  width: 100%;
  text-align: center;
  //display: flex;
  //align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &.spanXC {
    justify-content: center;
  }

  .nameIcon {
    width: 0.8vw;
    min-width: 0.8vw;
    max-width: 0.8vw;
    display: flex;
    align-items: center;

    img {
      width: 100%;
      display: block;
      margin-right: 0.2vw;
      cursor: pointer
    }
  }
}

.td-el-txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-pagination {
  .btn-prev {
    // background-color: transparent;
  }
}
</style>
